<template>
  <div>
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <el-button type="primary" size="small" @click="openModal({})">新增</el-button>
      </div>
      <el-table :data="adList" border stripe>
        <el-table-column
          fixed="left"
          type="index"
          align="center"
          label="序号"
          width="70"
        />
        <el-table-column
          align="center"
          label="广告图片"
          width="140"
        >
          <template slot-scope="scope">
            <img width="100" height="100" :src="scope.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="时间"
          width="250"
        >
          <template slot-scope="scope">
            <div>开始时间：{{ scope.row.createTime }}</div>
            <div style="margin-top:15px;">结束时间：{{ scope.row.endTime }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="广告名称"
          width="150"
        />
        <el-table-column
          prop="clickCount"
          align="center"
          label="点击数"
          width="150"
        />
        <el-table-column
          prop="orderCount"
          align="center"
          label="下单数"
          width="150"
        />
        <!-- type (integer, optional): 轮播位置：0->app首页轮播 , -->
        <el-table-column
          align="center"
          label="轮播位置"
          width="200"
        >
          <template slot-scope="scope">
            {{ scope.row.type===0?'首页轮播':'' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="url"
          align="center"
          label="链接地址"
          width="150"
        />
        <el-table-column
          prop="note"
          align="center"
          label="备注"
          width="150"
        />
        <!-- status (integer, optional): 上下线状态：0->下线；1->上线 , -->
        <el-table-column
          align="center"
          label="上下线状态"
          width="150"
        >
          <template slot-scope="scope">
            {{ scope.row.status?'上线':'下线' }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openModal(scope.row)">编辑</el-button>
            <el-button type="text" style="color:red;" size="small" @click="deleteAd(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      title="广告详情"
      :visible.sync="modalVisible"
      width="60%"
      @close="closeModal"
    >
      <el-form ref="form" style="width:90%;" :model="form" :rules="rules" label-width="120px" size="mini">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="广告名称" prop="name">
              <el-input v-model="form.name" placeholder="广告名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="备注">
              <el-input v-model="form.note" placeholder="备注" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="排序">
              <el-input v-model="form.sort" placeholder="排序" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="产品数量">
              <el-input v-model="form.productCount" placeholder="产品数量" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="链接">
              <el-input v-model="form.url" placeholder="链接" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="首页轮播位置">
              <el-select v-model="form.type" style="width:100%;" placeholder="首页轮播位置" clearable>
                <el-option
                  label="首页轮播位置"
                  :value="0"
                />
                <el-option
                  label="1"
                  :value="1"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第四行 -->
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="form.createTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width:75%;"
                type="datetime"
                placeholder="开始时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="form.endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width:75%;"
                type="datetime"
                placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第五行 -->
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="上下线状态">
              <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="图片">
              <el-upload
                ref="imgUpload"
                class="avatar-uploader"
                :action="uploadImageUrl"
                :headers="token"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="form.pic" :src="form.pic" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <span slot="footer">
        <el-button size="small" @click="modalVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="save">确认</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  adsList as adsListApi,
  delAds as delAdsApi,
  addAds as addAdsApi,
  updateAds as updateAdsApi
} from '@/api/shop/advertisment'
import mix from '@/mixin'
export default {
  name: 'Advertisment',
  mixins: [mix],
  data() {
    return {
      adList: [],
      flag: false, // false为新增
      form: {
        status: 0,
        pic: ''
      },
      rules: {
        name: [{ required: true, trigger: 'blur', message: '请输入广告名称' }]
      },
      modalVisible: false
    }
  },
  created() {
    this.getAdList()
  },
  methods: {
    // 图像上传成功
    handleAvatarSuccess(res, file) {
      const { success, message, data } = res
      console.log(res)
      if (success) {
        this.form.pic = data.fileUrl
        console.log(this.form.pic)
        this.$refs.imgUpload.clearFiles()
      } else {
        this.$message.error(message)
      }
    },
    // 图像上传之前
    beforeAvatarUpload(file) {
      const isLt1dot5M = file.size / 1024 / 1024 < 1.5
      var reg = /^image\/(jpe?g|png|webp|gif)$/

      const isImage = reg.test(file.type)
      if (!isImage) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt1dot5M) {
        this.$message.error('上传头像图片大小不能超过 1.5MB!')
      }
      return isImage && isLt1dot5M
    },
    // 关闭模态框
    closeModal() {
      this.modalVisible = false
      this.form = this.$$options.data().form
    },
    // 保存修改
    save() {
      this.$refs.form.validate((valid, error) => {
        if (valid) { // 验证通过
          var mes = ''
          if (this.flag) {
            mes = '修改'
          } else {
            mes = '新增'
          }
          this.$confirm('是否' + mes + '广告？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var api = null
            if (this.flag) { // 编辑广告
              api = updateAdsApi
            } else { // 新增广告
              api = addAdsApi
            }
            api(this.form)
              .then(res => {
                const { message, success } = res
                if (success) {
                  this.$message.success(mes + '广告成功!')
                  this.getAdList()
                  this.modalVisible = false
                } else {
                  this.$message.error(message)
                }
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消' + mes + '广告'
            })
          })
        } else { // 验证不通过
          for (var key in error) {
            if (error[key]) {
              const message = error[key][0].message
              this.$message.error(message)
              return
            }
          }
        }
      })
    },
    // 打开模态框
    openModal(item) {
      this.modalVisible = true
      if (item.id) { // 修改广告
        this.flag = true
      } else { // 新增广告
        this.flag = false
      }
      this.form = Object.assign(this.$options.data().form, item)
    },
    // 删除广告
    deleteAd(id) {
      this.$confirm('此操作将永久删除该广告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAdsApi(id)
          .then(res => {
            const { message, success } = res
            if (success) {
              this.$message.success('删除广告成功!')
              this.getAdList()
            } else {
              this.$message.error(message)
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取广告列表
    getAdList() {
      adsListApi()
        .then(res => {
          const { message, success, data } = res
          if (success) {
            this.adList = data.items
            console.log(this.adList)
          } else {
            this.$message.error(message)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep label{
  font-weight: 700;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
